<template>
    <div  class="alarm">
        <div class="title-box">
            告警总数：{{ statistics.total }}条 未处理: {{ statistics.dealt }}条
            <el-button @click="closeAlarmAll()" size="mini">一键清除</el-button>

            <span>选择店铺:</span>
            <el-select v-model="searchParam.conditions[0].value" placeholder="请选择" size="mini">
                <el-option
                    v-for="item in locationList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
            <span>开始时间</span>
            <el-date-picker
                v-model="searchParam.conditions[1].value"
                type="datetime"
                placeholder="选择日期时间"
                size="mini"
            />
            <span>结束时间</span>
            <el-date-picker
                v-model="searchParam.conditions[2].value"
                type="datetime"
                placeholder="选择日期时间"
                size="mini"
            />
            <el-button size="mini" @click="getAlarmList()">搜索</el-button>
        </div>
        <div class="view-box-content">
            <div v-for="(item, index) in alarmList" :key="index" class="v-b-c-item-box">
                <div class="v-b-c-item">
                    <div
                        class="v-b-c-title"
                        :style="{ background: item.status === 1 ? '#909399' : '#E83928' }"
                    >
                        <span>{{ item.description }}</span>
                        <span
                            v-if=" item.status === 1"
                            style="position: absolute;
                         right: 10px;
                         bottom: 11px;
                         height: 30px;
                         line-height: 30px;
                         padding: 0 8px;
                         display: inline-block;
                         background: #ccc;
                         border: 1px solid #FFF;"
                        >已处理</span>
                        <span
                            v-else-if="item.status === 2"
                            style="position: absolute;
                         right: 10px;
                         bottom: 11px;
                         height: 30px;
                         line-height: 30px;
                         padding: 0 8px;
                         display: inline-block;
                         background: #67c23a;
                         border: 1px solid #FFF;"
                        >未处理</span>
                    </div>
                    <div class="info-c" style="margin-top: 10px">
                        <div class="img-b">
                            <el-image
                                style="height: 100%"
                                :src="item.picture"
                                :preview-src-list="new Array(item.picture)"
                                fit="scale-down"
                            />
                        </div>
                        <div
                            class="text-content"
                            style="width: 60%;position: relative;padding: 0px 5px;"
                        >
                            <div style="padding:5px">
                                <el-button
                                    v-if="item.status === 2"
                                    size="mini"
                                    style="background:#f00;"
                                    title="清除告警"
                                    @click="closeAlarm(item)"
                                >清除告警</el-button>
                                <i
                                    class="el-icon-delete"
                                    style="color: red;font-size: 1.5rem;float: right;"
                                    @click="deleteItem(item)"
                                />
                            </div>
                            <div
                                style="text-align: right;position: absolute;bottom: 10px;right: 10px;"
                            >{{ $utils.formatDate(item.createDate, 'YYYY-MM-DD HH:mm:ss') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display:flex;justify-content: flex-end;padding: 20px;background: rgba(0,0,0,0)">
            <el-pagination
                :current-page.sync="searchParam.pageNum"
                :page-size="searchParam.pageSize"
                layout="prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
                style="color: black;"
            />
        </div>
    </div>
</template>

<script>

import request from '@/utils/request'

export default {
    name: "alarm",
    data() {
        return {
            alarmList: [],
            searchParam: {pageNum: 1, pageSize: 9, conditions: [
                {key: 'locationId',value: '', method: 'eq'},
                {key: 'createDate',value: '', method: 'ge'},
                {key: 'createDate',value: '', method: 'le'}
            ]},
            locationList: [],
            total: 0,
            statistics: {}
        };
    },
    created() {
    },
    mounted(){
        this.getAlarmList()
        this.getLocationList()
        this.getStatistics()
    },
    computed: {
    },
    methods: {
        getAlarmList(){
            request({
                url: '/rest/alarm/queryList',
                method: 'post',
                data: this.searchParam
            }).then(res => {
                if(res.status){
                    this.alarmList = res.data.records
                    this.total = res.data.total
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        getLocationList(){
            request({
                url: '/rest/location/queryList',
                method: 'post',
                data: {pageNum: 1, pageSize: 100, conditions: [{key: "status", value: 0, method: "ge"}]}
            }).then(res => {
                if(res.status){
                    this.locationList = res.data.records
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        handleCurrentChange(){
            this.getAlarmList()
        },
        closeAlarm(item){
            item.status = 1
            request({
                url: '/rest/alarm/update/' + item.id + '/' + item.deviceId,
                method: 'post',
                data: item
            }).then(res => {
                if(res.status){
                    this.getAlarmList()
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        closeAlarmAll(){
            request({
                url: '/rest/alarm/closeAll',
                method: 'get',
            }).then(res => {
                if(res.status){
                    this.getAlarmList()
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        deleteItem(item) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                request({
                    url: '/rest/alarm/delete/' + item.id + '/' + item.deviceId,
                    method: 'get',
                }).then(res => {
                    if(res.status){
                        this.getAlarmList()
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch((e) => {
                    console.error(e)
                    this.$message.error("网络错误!");
                });
            })
            .catch(() => {});
        },
        getStatistics(){
            request({
                url: '/rest/alarm/statistics',
                method: 'get',
            }).then(res => {
                if(res.status){
                    this.statistics = res.data
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.alarm {
    .el-pagination {
        background: rgba(1, 255, 255, 0);
        border-width: 0;
    }
    .el-pagination button:disabled {
        background: rgba(1, 255, 255, 0);
        cursor: not-allowed;
    }
    .el-pager li.active {
        cursor: default;
    }
    .view-box-content {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        .v-b-c-item-box {
            width: 33%;
            box-sizing: border-box;
            min-width: 450px;
            padding: 8px;
        }
        .v-b-c-item {
            // margin-left: 10px;
            .v-b-c-title {
                background: #716f3a;
                width: 100%;
                box-sizing: border-box;
                height: 46px;
                line-height: 46px;
                padding: 2px 0 0 10px;
                font-size: 18px;
                position: relative;
            }
            .info-c {
                display: flex;
                border: 2px solid #01a7ff;
            }
            .img-b {
                width: 40%;
                // border: 3px solid #435671;
                overflow: hidden;
                height: 130px;
                background: rgba(1, 255, 255, 0.2);
                text-align: center;
                img {
                    height: 100%;
                }
            }
            .text-content {
                li {
                    line-height: 25px;
                    height: 25px;
                }
            }
        }
    }
}
</style>